<template>
	<div>
		<div class="container">
			<div class="row">
				<div class="col-12 col-sm-8 col-md-6 col-lg-4 m-auto pt-5" style=" margin:0 auto">
					<div class="card mt-5">
						<div class="card-header">
							<h3 class="mb-0">UNI-ADMIN</h3>
						</div>
						<div class="card-body">
							<!-- 登录表单 -->
							<el-form ref="ruleform" :model="ruleForm" label-width="60px" :rules="rules">
								<el-form-item label="账号" prop="username">
									<el-input v-model="ruleForm.username" clearable placeholder="请输入邮箱或者电话"></el-input>
								</el-form-item>
								<el-form-item label="密码" prop="password">
									<el-input v-model="ruleForm.password" placeholder="请输入密码" :type="passw" @blur="onBlur" clearable>
										<i slot="suffix" :class="icon" @click="showPass"></i>
									</el-input>
								</el-form-item>

								<el-form-item>
									<el-button type="primary" @click="onSubmit">登录</el-button>
									<el-button @click="resetForm">重置</el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				icon: "el-input__icon el-icon-view",
				passw: "password",

				ruleForm: {
					username: "",
					password: ""
				},
				rules: {
					username: [{
						required: true,
						message: "账号",
						trigger: "blur"
					}],
					password: [{
						required: true,
						message: "密码",
						trigger: "blur"
					}]
				}
			};
		},

		methods: {
			onSubmit() {
				this.$refs.ruleform.validate(valid => {
					if (!valid) return;
				})
			},

			resetForm() {
				if (this.$refs.ruleForm !== undefined) {
					this.$refs.ruleForm.resetFields();
				}
				this.ruleForm = {};
				this.$set(this.ruleForm, "username", "");
				this.$set(this.ruleForm, "password", "");
			},

			showPass() {
				//点击图标是密码隐藏或显示
				if (this.passw == "text") {
					this.passw = "password";
					//更换图标
					this.icon = "el-input__icon el-icon-view";
				} else {
					this.passw = "text";
					this.icon = "el-input__icon el-icon-loading";
					setTimeout(() => {
						this.icon = "";
					}, 500);
				}
			},
			//密码失焦事件
			onBlur() {
				this.passw = "password";
				this.icon = "el-input__icon el-icon-view";
			}
		}
	};
</script>

<style>
</style>
